<template>
  <view class="main">
    <!-- <view class="common ">
            <view class="set-item dispaly-just-between" v-for="(item, index) in settingList" :key="index">
                <view class="name">{{ item.name }}</view>
                <view class="sel-w dispaly-align-center" @click="clickType(item, index)">
                    <view class="sel-n" v-if="current == index"></view>
                </view>
            </view>
        </view> -->
    <view class="time-box dispaly-just-between common">
      <view class="title">推广时长</view>
      <view class="item-box">
        <view
          :class="{ ac: timeCurrent == index }"
          class="time-item dispaly-align-center"
          v-for="(item, index) in ruleList"
          :key="index"
          @click="clickTime(item, index)"
          >{{ item.name }}天</view
        >
      </view>
    </view>
    <view class="common price-box">
      <view class="price-item dispaly-just-between">
        <view class="price-title">价格</view>
        <view v-if="ruleList.length" class="price-number" style="color: #0753fc"
          >￥{{ Number(ruleList[timeCurrent].value1).toFixed(2) }}
        </view>
      </view>
      <!-- <view class="price-item dispaly-just-between">
                <view class="price-title">原价</view>
                <view v-if="ruleList.length" class="price-number" style="color: #999999;text-decoration:line-through">
                    ￥{{
                        Number(ruleList[timeCurrent].remark).toFixed(2) }}</view>
            </view>
            <view class="price-item dispaly-just-between">
                <view class="price-title">优惠</view>
                <view v-if="ruleList.length" class="price-number" style="color: #F5891D;">￥{{
                    Number(Number(ruleList[timeCurrent].remark) -
                        Number(ruleList[timeCurrent].dictValue)).toFixed(2) }}</view>
            </view> -->
    </view>
  </view>
  <view class="btns">
    <Button
      @clickButton="submit"
      :loading="loading"
      loading-text="支付中"
      :text="priceText"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getWriteFillList, overhead, getRule } from "@/api/apiList";

const formData = ref({
  id: "",
  type: "2",
  ruleId: "",
});
const circleId = ref("");
onLoad((option) => {
  formData.value.id = option.id;
  circleId.value = option.circleId;
  console.log(circleId.value, "circleId");
  // getRules()
  getR();
});

const getR = async () => {
  const res = await getRule({ circleId: circleId.value, type: 2 });
  if (res.code == 200) {
    console.log(res, "res");
    ruleList.value = res.data;
    priceText.value = `立即支付￥${Number(ruleList.value[0].value1).toFixed(
      2
    )}`;
    formData.value.ruleId = ruleList.value[0].id;
  }
};

const ruleList = ref([]);
const getRules = async (data = "/overhead_square") => {
  const res = await getWriteFillList(data);
  if (res.code == 200) {
    ruleList.value = res.data;
    priceText.value = `立即支付￥${ruleList.value[0].dictValue}`;
    formData.value.ruleId = ruleList.value[0].dictCode;
  }
};

const timeCurrent = ref(0);
const priceText = ref("");
const clickTime = (item, index) => {
  priceText.value = `立即支付￥${Number(item.value1).toFixed(2)}`;
  timeCurrent.value = index;
  formData.value.ruleId = item.id;
};

const settingList = ref([
  { name: "广场置顶", type: 1 },
  { name: "首页置顶", type: 2 },
]);

// const clickType = (item, index) => {
//     console.log(item)
//     item.type == 1 ? getRules('/overhead_square') : getRules('/overhead_index')
//     current.value = index
//     formData.value.type = item.type
// }

const current = ref(0);

const loading = ref(false);
const submit = async () => {
  const ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    uni.setStorageSync("topData", formData.value);
    uni.setStorageSync("palyType", "2");
    // 跳转页面
    uni.navigateTo({
      url: "/pages/forSale/pages/weixinPay",
    });
  } else {
    return uni.showToast({
      title: "请前往微信公众号号进行支付",
      icon: "none",
    });
  }
  return;
  loading.value = true;
  console.log(111111111);
  console.log(formData.value);
  return false;
  const res = await overhead(formData.value);
  if (res.code == 200) {
    loading.value = false;
    uni.showToast({
      title: "支付成功",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.common {
  padding: 40rpx;
  box-sizing: border-box;
  border: 1px solid #0753fd;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.ac {
  background-color: #0753fd !important;
  color: #fff !important;
}

.price-box {
  .price-item:last-child {
    margin-bottom: 0;
  }

  .price-item {
    margin-bottom: 36rpx;

    .price-title {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #111111;
    }

    .price-number {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      font-weight: normal;
      line-height: 14px;
    }
  }
}

.time-box {
  .title {
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    color: #111111;
  }

  .item-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .time-item {
      border: 1px solid #0753fd;
      border-radius: 8rpx;
      padding: 10rpx 20rpx;
      margin: 15rpx;
    }
  }
}

.set-item:last-child {
  margin-bottom: 0;
}

.set-item:first-child {
  border-bottom: 1rpx solid #eee;
  padding-bottom: 40rpx;
}

.set-item {
  margin-bottom: 52rpx;

  .name {
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    color: #111111;
  }

  .sel-w {
    width: 34rpx;
    height: 34rpx;
    box-sizing: border-box;
    border: 1rpx solid #999999;
    border-radius: 50%;

    .sel-n {
      width: 26rpx;
      height: 26rpx;
      background-color: #0753fd;
      border-radius: 50%;
    }
  }
}

.main {
  padding: 40rpx 50rpx;
}

.btns {
  padding: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
</style>
